<template>
  <div class="mainBox">
    <div class="leftBox">

      <!-- 病人查询模块-->
      <div class="leftTopbox">
        <div class="leftTopleftBox">
          <div class="searchIcon"></div>
          <h2>病人查询</h2>
        </div>
        <div class="leftToprightBox">
          <div class="leftTopFormBox">
            <el-form :rules="rule1" :inline="true" :model="user" ref="nameForm" class="demo-form-inline"
              style="margin-left: 60px">
              <i class="el-icon-user-solid" style="margin-top: 10px"></i>
              <el-form-item label="病人姓名" prop="patientName">
                <el-input type="text" aria-autocomplete="false" v-model="user.patientName" placeholder="请输入病人姓名">
                  <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" class="submitBox" circle @click="findByName">
                </el-button>
              </el-form-item>
            </el-form>
            <el-divider content-position="left">按标签查询</el-divider>
            <el-form @keyup.enter.native="findByTags" ref="tagForm" :inline="true" :model="tagForm" class="demo-form-inline" style="margin-left: 60px">
              <i class="el-icon-edit" style="margin-top: 10px"></i>
              <el-form-item label="基本信息" prop="t_name">
                <el-select remote reserve-keyword :remote-method="remoteMethodInfo" :loading="loadingInfo" filterable
                  v-model="tagForm.baseMsg" placeholder="病人基本信息">
                  <el-option v-for="item in infos" :key="item.tagId" :label="item.tagName" :value="item.tagName">
                  </el-option>
                </el-select>
              </el-form-item><br />
              <i class="el-icon-s-opportunity" style="margin-top: 10px"></i>
              <el-form-item label="业务属性" prop="s_name">
                <el-select remote reserve-keyword :remote-method="remoteMethodService" :loading="loadingService"
                  filterable v-model="tagForm.service" placeholder="病人业务属性">
                  <el-option v-for="item in services" :key="item.tagId" :label="item.tagName" :value="item.tagName">
                  </el-option>
                </el-select>
              </el-form-item><br />
              <i class="el-icon-s-order" style="margin-top: 10px"></i>
              <el-form-item label="诊疗属性" prop="t_name">
                <el-select remote reserve-keyword :remote-method="remoteMethodTreatment" :loading="loadingTreatment"
                  filterable v-model="tagForm.treament" placeholder="病人诊疗属性">
                  <el-option v-for="item in treaments" :key="item.tagId" :label="item.tagName" :value="item.tagName">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" class="submitBox" circle @click="findByTags">
                </el-button>
                <el-button type="success" icon="el-icon-refresh" circle @click="refreshForm"></el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>

      <!-- 病人查询列表模块-->
      <div class="leftBottomBox">
        <div class="leftBottomleftBox">
          <div class="showIcon"></div>
          <h2>病人查询列表</h2>
        </div>
        <el-table lazy :data="patient" highlight-current-row @current-change="handleCurrentChange" stripe
          empty-text="无相关病人信息" style="width: 520px" height="445px" class="tableBox"
          :header-cell-style="{ background: 'rgba(235, 245, 243,0.8)' }"
          :header-row-style="{ background: 'rgba(235, 245, 243,0)' }"
          :cell-style="{ background: 'rgba(235, 245, 243,0.3)' }" :row-style="{ background: 'rgba(235, 245, 243, 0)' }">
          <el-table-column fixed prop="name" label="姓名" width="160">
          </el-table-column>
          <el-table-column prop="sex" label="性别" width="80">
          </el-table-column>
          <el-table-column prop="age" label="年龄" width="80">
          </el-table-column>
          <el-table-column prop="phone" label="手机号码" width="180">
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 病人信息详情模块-->
    <div class="rightBox">
      <div class="rightIconBox">
        <div class="oneIcon"></div>
        <h2>病人信息详情</h2>
      </div>

      <div class="rightRightBox">
        <h2 class="animate__animated animate__rollIn">
          <i class="el-icon-user"></i>病人姓名:{{ onePatient.name }}
        </h2>
        <h3 class="animate__animated animate__fadeInTopLeft">
          <i class="el-icon-s-custom"></i> 基本信息：<el-tag type="info" size="medium" v-if="onePatient.info">
            {{ onePatient.info }}
          </el-tag>
          <el-button class="button-new-tag" size="mini">+</el-button>
        </h3>
        <h3 class="animate__animated animate__fadeInTopRight">
          <i class="el-icon-s-promotion"></i> 业务属性：<el-tag v-if="onePatient.service" type="success" size="medium">
            {{ onePatient.service }}
          </el-tag>
          <el-button class="button-new-tag" size="mini">+</el-button>
        </h3>
        <h3 class="animate__animated animate__fadeInDown">
          <i class="el-icon-s-order"></i> 诊疗属性：<el-tag :key="tag" v-for="tag in this.onePatient.treament" closable
            @close="handleClose(tag)">{{ tag }}</el-tag>
          <el-button class="button-new-tag" size="mini" @click="TreatmentDialogVisible = true">+</el-button>
        </h3>
        <el-dialog width="500px" :append-to-body="true" title="添加诊疗属性" :visible.sync="TreatmentDialogVisible">
          <el-select remote reserve-keyword :remote-method="remoteMethod2" :loading="loading" filterable
            v-model="addOne" placeholder="病人诊疗属性">
            <el-option v-for="item in addTreatment" :key="item.t_name" :label="item.t_name" :value="item.t_name">
            </el-option>
          </el-select>

          <div slot="footer" class="dialog-footer">
            <el-button @click="TreatmentDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleInputConfirm">确 定</el-button>
          </div>
        </el-dialog>
        <h3 class="animate__animated animate__rubberBand">
          <i class="el-icon-s-opportunity"></i>基本描述：
        </h3>

        <el-input disabled type="textarea" :autosize="{ minRows: 10, maxRows: 10 }" resize="none"
          placeholder="请输入内容" v-model="textarea1">
        </el-input>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "PatinentTags",
    data() {
      return {
        loadingInfo: false, //基本信息搜索加载动画
        loadingService: false, //业务属性搜索加载动画
        loadingTreatment: false, //诊疗属性搜索加载动画
        loading: false, //添加标签搜索加载动画
        TreatmentDialogVisible: false, //添加病人诊疗属性对话框

        user: { //通过病人姓名查询
          patientName: "",
        },

        rule1: { //通过病人姓名查询的表单输入规则验证
          patientName: [{
            min: 1,
            max: 4,
            message: "长度在 1 到 4个字符",
            trigger: "blur"
          }, ],
        },
        tagDto: { //远程搜索传给后端的对象
          delFlag: 0,
          page: 0,
          size: 10,
          tagId: "",
          tagName: "",
          tagType: 0,
        },

        infos: [], //基本信息的远程搜索结果集合
        services: [], //业务属性的远程搜索结果集合
        treaments: [], //诊疗属性的远程搜索结果集合
        tagForm: { //通过标签查询的三个值
          baseMsg: "",
          service: "",
          treament: "",
        },
        patient: [ //病人查询结果的表格
          // {
          //   name: "",
          //   sex: "",
          //   age: "",
          //   phone: "",
          //   service: "",
          //   // treatment: [],
          // },
        ],
        onePatient: { //展示的某个病人的信息
          name: "",
          info: "",
          service: "",
          treament: [],
          msg: "",
        },
        textarea1: "", //病人详情的基本描述文本域
        addOne: "", //添加标签时，选中的标签
        addTreatment: [], //添加标签的远程搜索结果集合
      };
    },
    mounted() {},
    methods: {
      //通过病人姓名查询
      findByName() {
        const _this = this;
        _this.$refs.nameForm.validate((valid) => {
          if (valid) {
            _this
              .getRequest(
                "http://localhost:9099/patient/findByName?patientName=" +
                _this.user.patientName
              )
              .then((res) => {
                if (res.data) {
                  if (res.data.length == "0") {
                    _this.$message("没有相关病人信息");
                  } else {
                    _this.patient = res.data;
                  }
                } else {
                  _this.patient = _this.patient;
                }
              });
          } else {
            _this.$message.error("请输入正确格式的病人姓名！");
            return false;
          }
        });
      },

      //通过病人标签查找
      findByTags() {
        console.log(this.tagForm);
      },

      //远程搜索功能监听方法（基本信息）
      remoteMethodInfo(query) {
        const _this = this;
        query = query.replace(/\s*/g, "");
        if (query.length > 0) {
          _this.loadingService = true;
          setTimeout(() => {
            _this.loadingService = false;
            _this.queryInfo(query);
          }, 1000);
        } else {
          _this.infos = [];
        }
      },
      //远程搜索的接口（基本信息）
      queryInfo(query) {
        const _this = this;
        _this.tagDto.tagType = 0;
        _this.tagDto.tagName = query
        _this.postRequest("/tag/list", _this.tagDto).then((res) => {
          _this.infos = res.data.data;
        });
      },

      //远程搜索功能监听方法（业务属性）
      remoteMethodService(query) {
        const _this = this;
        query = query.replace(/\s*/g, "");
        if (query.length > 0) {
          _this.loadingInfo = true;
          setTimeout(() => {
            _this.loadingInfo = false;
            _this.queryService(query);
          }, 1000);
        } else {
          _this.services = [];
        }
      },
      //远程搜索的接口（业务属性）
      queryService(query) {
        const _this = this;
        _this.tagDto.tagType = 1;
        _this.tagDto.tagName = query
        _this.postRequest("/tag/list", _this.tagDto).then((res) => {
          _this.services = res.data.data;
        });
      },

      //远程搜索功能监听方法（诊疗属性）
      remoteMethodTreatment(query) {
        const _this = this;
        query = query.replace(/\s*/g, "");
        if (query.length > 0) {
          _this.loadingTreatment = true;
          setTimeout(() => {
            _this.loadingTreatment = false;
            _this.queryTreatment(query);
          }, 1000);
        } else {
          _this.treaments = [];
        }
      },
      //远程搜索的接口（诊疗属性）
      queryTreatment(query) {
        const _this = this;
        _this.tagDto.tagType = 2;
        _this.tagDto.tagName = query;
        _this.postRequest("/tag/list", _this.tagDto).then((res) => {
          _this.treaments = res.data.data;
        });
      },

      //清空表单数据
      refreshForm(){
        const _this = this;
        _this.treaments = [];
        _this.services = [];
        _this.infos = [];
        _this.tagForm = [];
        _this.user.patientName = null;
      },

      //点击表格某个病人的信息，获取当前病人信息
      handleCurrentChange(val) {
        const _this = this;
        _this.onePatient = val;
        console.log(_this.onePatient);
        _this.textarea1 = _this.onePatient.msg;
      },

      //远程搜索的接口（添加标签）
      remoteMethod2(query) {
        const _this = this;
        query = query.replace(/\s*/g, "");
        if (query.length > 0) {
          _this.loading = true;
          setTimeout(() => {
            _this.loading = false;
            _this.queryVagueReportHomeIndexData2(query);
          }, 2000);
        } else {
          _this.addTreatment = [];
        }
      },
      //远程搜索的接口（添加标签）
      queryVagueReportHomeIndexData2(query) {
        const _this = this;
        _this
          .getRequest(
            "http://localhost:9099/patient/findTreatmentByName?t_name=" + query
          )
          .then((res) => {
            console.log(res.data);
            _this.addTreatment = res.data;
          });
      },

      //添加标签对话框的确认事件
      handleInputConfirm() {
        const _this = this;
        //这里会拿到搜索选择后的标签，就是addOne
        //onePatient.treament是一个数组
        _this.onePatient.treament.push(_this.addOne);
        _this.TreatmentDialogVisible = false;
      },
      //删除某一个标签的事件
      handleClose(tag) {
        const _this = this;
        _this.onePatient.treament.splice(
          _this.onePatient.treament.indexOf(tag),
          1
        );
      },
    },

    created() {},
  };
</script>

<style lang="css" scoped>
  @import '../assets/css/patienttag.css';
</style>
